<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据处理平台</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#6366f1'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<style>
:where([class^="ri-"])::before {
content: "\f3c2";
}
.workflow-node {
position: absolute;
width: 120px;
height: 80px;
border-radius: 8px;
background: white;
border: 2px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
cursor: move;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.workflow-node.selected {
border-color: #3b82f6;
}
.workflow-canvas {
position: relative;
width: 100%;
height: 400px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.custom-checkbox {
appearance: none;
width: 1rem;
height: 1rem;
border: 2px solid #d1d5db;
border-radius: 0.25rem;
background-color: white;
cursor: pointer;
position: relative;
}
.custom-checkbox:checked {
background-color: #3b82f6;
border-color: #3b82f6;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
left: 3px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-switch {
width: 44px;
height: 24px;
background-color: #d1d5db;
border-radius: 12px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
}
.custom-switch.active {
background-color: #3b82f6;
}
.custom-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}
.custom-switch.active::after {
transform: translateX(20px);
}
.custom-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: #e5e7eb;
outline: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
}
.custom-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
border: none;
}
.custom-radio {
appearance: none;
width: 1rem;
height: 1rem;
border: 2px solid #d1d5db;
border-radius: 50%;
background-color: white;
cursor: pointer;
position: relative;
}
.custom-radio:checked {
border-color: #3b82f6;
}
.custom-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #3b82f6;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<aside class="w-64 bg-white shadow-sm border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<div class="flex items-center">
<span class="text-xl font-bold text-gray-900 font-['Pacifico']">logo</span>
</div>
</div>
<nav class="flex-1 px-2 py-4">
<ul class="space-y-1">
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-dashboard-line"></i>
</div>
<span>模型管理</span>
<div class="w-5 h-5 flex items-center justify-center ml-auto">
<i class="ri-arrow-right-s-line"></i>
</div>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
</div>
<span>模型生命周期</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
</div>
<span>模型性能评估</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
</div>
<span>模型转换适配</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-cpu-line"></i>
</div>
<span>推理服务</span>
</button>
</li>
<li>
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/5d354e8a-3b6d-4239-a87d-bb3df9b1adff" data-readdy="true" class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-api-line"></i>
</div>
<span>API 接口</span>
</a>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm bg-primary text-white rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-database-2-line"></i>
</div>
<span>数据处理</span>
<div class="w-5 h-5 flex items-center justify-center ml-auto">
<i class="ri-arrow-down-s-line"></i>
</div>
</button>
<ul class="ml-6 mt-2 space-y-1">
<li>
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/9378c72c-61c7-4d59-b808-6bd09795c82d" data-readdy="true" class="flex items-center w-full px-3 py-2 text-sm text-blue-200 hover:text-white hover:bg-blue-600 rounded-lg">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-filter-3-line"></i>
</div>
<span>数据预处理</span>
</a>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-blue-200 hover:text-white hover:bg-blue-600 rounded-lg">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-magic-line"></i>
</div>
<span>数据增强</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-blue-200 hover:text-white hover:bg-blue-600 rounded-lg">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-settings-3-line"></i>
</div>
<span>结果后处理</span>
</button>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
<div class="flex-1 flex flex-col">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<nav class="text-sm text-gray-500">
<span>数据处理平台</span>
<span class="mx-2">/</span>
<span class="text-gray-900">数据处理</span>
</nav>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-600">工作流模式</span>
<div class="custom-switch" id="workflowToggle"></div>
</div>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>生产环境</option>
<option>测试环境</option>
<option>开发环境</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
<div class="relative">
<input type="text" placeholder="搜索任务..." class="bg-gray-50 border border-gray-300 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-64">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="ri-search-line text-gray-400"></i>
</div>
</div>
<button class="relative p-2 text-gray-400 hover:text-gray-600">
<div class="w-6 h-6 flex items-center justify-center">
<i class="ri-notification-3-line"></i>
</div>
<span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span>
</button>
<div class="flex items-center space-x-3">
<img src="https://readdy.ai/api/search-image?query=professional%20business%20portrait%20of%20a%20young%20asian%20software%20engineer%20in%20modern%20office%20setting%2C%20clean%20background%2C%20professional%20lighting%2C%20high%20quality%20headshot&width=40&height=40&seq=user_avatar&orientation=squarish" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
<div class="text-sm">
<div class="text-gray-900 font-medium">张开发</div>
</div>
</div>
</div>
</div>
</header>
<main class="flex-1 overflow-auto">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold text-gray-900">数据处理中心</h1>
<p class="text-gray-600 mt-1">提供全流程数据预处理、增强和后处理能力</p>
</div>
<div class="flex items-center space-x-3">
<button id="createTaskBtn" class="bg-primary text-white px-6 py-2 rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button flex items-center">
<i class="ri-add-line mr-2"></i>
快速创建
</button>
<button class="bg-white border border-gray-300 text-gray-700 px-6 py-2 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button flex items-center">
<i class="ri-download-line mr-2"></i>
导入模板
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-lg">
<i class="ri-database-2-line text-blue-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">处理任务总数</p>
<p class="text-2xl font-bold text-gray-900">1,247</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-green-100 rounded-lg">
<i class="ri-check-line text-green-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">成功率</p>
<p class="text-2xl font-bold text-gray-900">98.7%</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-yellow-100 rounded-lg">
<i class="ri-time-line text-yellow-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">平均处理时间</p>
<p class="text-2xl font-bold text-gray-900">3.2分钟</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-lg">
<i class="ri-cpu-line text-purple-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">GPU 利用率</p>
<p class="text-2xl font-bold text-gray-900">76.3%</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div class="lg:col-span-2">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900">流程设计器</h2>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-button text-sm hover:bg-gray-200 !rounded-button">
<i class="ri-save-line mr-1"></i>
保存
</button>
<button id="runWorkflowBtn" class="px-3 py-1 bg-primary text-white rounded-button text-sm hover:bg-blue-600 !rounded-button">
<i class="ri-play-line mr-1"></i>
运行
</button>
</div>
</div>
</div>
<div class="p-6">
<div class="workflow-canvas" id="workflowCanvas">
<div class="workflow-node" style="top: 50px; left: 50px;" data-type="input">
<div class="text-center">
<i class="ri-file-line text-blue-600 text-xl mb-1"></i>
<div class="text-xs text-gray-700">数据输入</div>
</div>
</div>
<div class="workflow-node" style="top: 50px; left: 250px;" data-type="preprocess">
<div class="text-center">
<i class="ri-filter-3-line text-green-600 text-xl mb-1"></i>
<div class="text-xs text-gray-700">预处理</div>
</div>
</div>
<div class="workflow-node" style="top: 150px; left: 150px;" data-type="enhance">
<div class="text-center">
<i class="ri-magic-line text-purple-600 text-xl mb-1"></i>
<div class="text-xs text-gray-700">数据增强</div>
</div>
</div>
<div class="workflow-node" style="top: 50px; left: 450px;" data-type="output">
<div class="text-center">
<i class="ri-download-line text-orange-600 text-xl mb-1"></i>
<div class="text-xs text-gray-700">数据输出</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-4 border-b border-gray-200">
<h3 class="text-md font-semibold text-gray-900">组件库</h3>
</div>
<div class="p-4">
<div class="space-y-3">
<div class="text-xs font-medium text-gray-500 uppercase tracking-wider">数据预处理</div>
<div class="grid grid-cols-1 gap-2">
<div class="flex items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100" draggable="true" data-component="text-clean">
<i class="ri-text text-blue-600 mr-2"></i>
<span class="text-sm text-gray-700">文本清洗</span>
</div>
<div class="flex items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100" draggable="true" data-component="image-resize">
<i class="ri-image-line text-green-600 mr-2"></i>
<span class="text-sm text-gray-700">图像缩放</span>
</div>
<div class="flex items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100" draggable="true" data-component="audio-denoise">
<i class="ri-volume-up-line text-purple-600 mr-2"></i>
<span class="text-sm text-gray-700">音频降噪</span>
</div>
</div>
<div class="text-xs font-medium text-gray-500 uppercase tracking-wider mt-4">数据增强</div>
<div class="grid grid-cols-1 gap-2">
<div class="flex items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100" draggable="true" data-component="image-augment">
<i class="ri-magic-line text-yellow-600 mr-2"></i>
<span class="text-sm text-gray-700">图像增强</span>
</div>
<div class="flex items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100" draggable="true" data-component="text-augment">
<i class="ri-translate-2 text-red-600 mr-2"></i>
<span class="text-sm text-gray-700">文本增强</span>
</div>
</div>
<div class="text-xs font-medium text-gray-500 uppercase tracking-wider mt-4">后处理</div>
<div class="grid grid-cols-1 gap-2">
<div class="flex items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100" draggable="true" data-component="result-filter">
<i class="ri-filter-line text-indigo-600 mr-2"></i>
<span class="text-sm text-gray-700">结果过滤</span>
</div>
<div class="flex items-center p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100" draggable="true" data-component="format-convert">
<i class="ri-file-transfer-line text-pink-600 mr-2"></i>
<span class="text-sm text-gray-700">格式转换</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-4 border-b border-gray-200">
<h3 class="text-md font-semibold text-gray-900">实时监控</h3>
</div>
<div class="p-4">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">CPU 使用率</span>
<span class="text-sm font-medium text-gray-900">68%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: 68%"></div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">内存使用率</span>
<span class="text-sm font-medium text-gray-900">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 45%"></div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">GPU 使用率</span>
<span class="text-sm font-medium text-gray-900">76%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 76%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-8">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">处理任务趋势</h2>
</div>
<div class="p-6">
<div id="taskTrendChart" style="height: 300px;"></div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900">数据预览</h2>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-button text-sm hover:bg-gray-200 !rounded-button">
<i class="ri-refresh-line mr-1"></i>
刷新
</button>
</div>
</div>
</div>
<div class="p-6">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">数据类型</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">大小</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-3 py-2 text-gray-900">001</td>
<td class="px-3 py-2 text-gray-900">图像</td>
<td class="px-3 py-2 text-gray-900">2.3MB</td>
<td class="px-3 py-2">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">已处理</span>
</td>
</tr>
<tr>
<td class="px-3 py-2 text-gray-900">002</td>
<td class="px-3 py-2 text-gray-900">文本</td>
<td class="px-3 py-2 text-gray-900">156KB</td>
<td class="px-3 py-2">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">处理中</span>
</td>
</tr>
<tr>
<td class="px-3 py-2 text-gray-900">003</td>
<td class="px-3 py-2 text-gray-900">音频</td>
<td class="px-3 py-2 text-gray-900">5.7MB</td>
<td class="px-3 py-2">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">等待中</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900">处理配置</h2>
<button class="px-3 py-1 bg-primary text-white rounded-button text-sm hover:bg-blue-600 !rounded-button">
<i class="ri-settings-3-line mr-1"></i>
高级配置
</button>
</div>
</div>
<div class="p-6">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">批处理大小</label>
<input type="range" class="custom-range" min="1" max="100" value="32">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>1</span>
<span>32</span>
<span>100</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">处理模式</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="processMode" value="sequential" class="custom-radio mr-2" checked>
<span class="text-sm text-gray-700">顺序处理</span>
</label>
<label class="flex items-center">
<input type="radio" name="processMode" value="parallel" class="custom-radio mr-2">
<span class="text-sm text-gray-700">并行处理</span>
</label>
</div>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox mr-2" checked>
<span class="text-sm text-gray-700">启用错误重试</span>
</label>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox mr-2">
<span class="text-sm text-gray-700">自动保存中间结果</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900">任务列表</h2>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2">
<label class="text-sm text-gray-600">状态:</label>
<div class="relative">
<select id="taskStatusFilter" class="appearance-none bg-white border border-gray-300 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="all">全部</option>
<option value="running">运行中</option>
<option value="completed">已完成</option>
<option value="failed">失败</option>
<option value="pending">等待中</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400 text-sm"></i>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="text" id="taskSearchInput" placeholder="搜索任务..." class="bg-gray-50 border border-gray-300 rounded-lg pl-8 pr-4 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-48">
<div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
<i class="ri-search-line text-gray-400 text-sm"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<input type="checkbox" class="custom-checkbox">
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理时间</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg mr-3">
<i class="ri-image-line text-blue-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">商品图像预处理</div>
<div class="text-sm text-gray-500">batch_20241216_001</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">图像预处理</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">已完成</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
</div>
<span class="text-sm text-gray-900">100%</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2.3分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-16 14:30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-download-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-green-100 rounded-lg mr-3">
<i class="ri-text text-green-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">用户评论文本清洗</div>
<div class="text-sm text-gray-500">batch_20241216_002</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">文本预处理</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">处理中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-yellow-600 h-2 rounded-full" style="width: 65%"></div>
</div>
<span class="text-sm text-gray-900">65%</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.8分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-16 14:45</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-pause-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-stop-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-purple-100 rounded-lg mr-3">
<i class="ri-magic-line text-purple-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">产品图像数据增强</div>
<div class="text-sm text-gray-500">batch_20241216_003</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数据增强</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">等待中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div>
</div>
<span class="text-sm text-gray-900">0%</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">-</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-16 15:00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-edit-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-play-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-orange-100 rounded-lg mr-3">
<i class="ri-settings-3-line text-orange-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">模型推理结果后处理</div>
<div class="text-sm text-gray-500">batch_20241216_004</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">结果后处理</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">失败</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-red-600 h-2 rounded-full" style="width: 30%"></div>
</div>
<span class="text-sm text-gray-900">30%</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">0.5分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-16 14:15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-bug-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-restart-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-indigo-100 rounded-lg mr-3">
<i class="ri-volume-up-line text-indigo-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">语音数据标注处理</div>
<div class="text-sm text-gray-500">batch_20241216_005</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">智能标注</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">已完成</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
</div>
<span class="text-sm text-gray-900">100%</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5.7分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-16 13:45</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-download-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-500">
显示 1-5 条，共 47 条记录
</div>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>
上一页
</button>
<button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">1</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">2</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">3</button>
<span class="px-2 text-gray-500">...</span>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">10</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">
下一页
</button>
</div>
</div>
</div>
</div>
<div id="runWorkflowModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
<div class="bg-white rounded-lg w-[600px] shadow-xl">
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">工作流执行确认</h3>
<button id="closeRunModal" class="text-gray-400 hover:text-gray-600">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-close-line"></i>
</div>
</button>
</div>
<div class="p-6">
<div class="space-y-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">工作流预览</h4>
<div class="bg-gray-50 rounded-lg p-4 text-sm text-gray-600">
<div class="flex items-center space-x-2 mb-2">
<i class="ri-file-line text-blue-600"></i>
<span>数据输入</span>
<i class="ri-arrow-right-line text-gray-400"></i>
<i class="ri-filter-3-line text-green-600"></i>
<span>预处理</span>
<i class="ri-arrow-right-line text-gray-400"></i>
<i class="ri-magic-line text-purple-600"></i>
<span>数据增强</span>
<i class="ri-arrow-right-line text-gray-400"></i>
<i class="ri-download-line text-orange-600"></i>
<span>数据输出</span>
</div>
<div class="text-xs text-gray-500">共 4 个节点，预计处理 1000 条数据</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">预估处理时间</h4>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-gray-900">~15 分钟</div>
<div class="text-xs text-gray-500 mt-1">基于历史数据分析</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">资源消耗预估</h4>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-600">CPU</span>
<span class="text-sm font-medium text-gray-900">约 45%</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">内存</span>
<span class="text-sm font-medium text-gray-900">约 2.5GB</span>
</div>
</div>
</div>
</div>
<div class="bg-yellow-50 rounded-lg p-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="ri-information-line text-yellow-600"></i>
</div>
<div class="ml-3">
<h4 class="text-sm font-medium text-yellow-800">执行提示</h4>
<div class="mt-2 text-sm text-yellow-700">
<ul class="list-disc pl-5 space-y-1">
<li>请确保数据源连接正常</li>
<li>建议在非高峰期执行大规模处理任务</li>
<li>执行过程中可随时暂停或终止</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
<button id="cancelRunBtn" class="px-4 py-2 border border-gray-300 rounded-button text-sm text-gray-700 hover:bg-gray-50">取消</button>
<button id="confirmRunBtn" class="px-4 py-2 bg-primary text-white rounded-button text-sm hover:bg-blue-600">确认运行</button>
</div>
</div>
</div>
<div id="createTaskModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
<div class="bg-white rounded-lg w-[700px] shadow-xl">
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">快速创建任务</h3>
<button id="closeTaskModal" class="text-gray-400 hover:text-gray-600">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-close-line"></i>
</div>
</button>
</div>
<div class="p-6">
<div class="grid grid-cols-3 gap-4 mb-6">
<button class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 text-center task-type-btn" data-type="preprocess">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-lg mx-auto mb-2">
<i class="ri-filter-3-line text-blue-600 text-xl"></i>
</div>
<div class="text-sm font-medium text-gray-900">数据预处理</div>
<div class="text-xs text-gray-500 mt-1">清洗、格式转换、特征提取</div>
</button>
<button class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 text-center task-type-btn" data-type="enhance">
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-lg mx-auto mb-2">
<i class="ri-magic-line text-purple-600 text-xl"></i>
</div>
<div class="text-sm font-medium text-gray-900">数据增强</div>
<div class="text-xs text-gray-500 mt-1">扩充样本、提升多样性</div>
</button>
<button class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 text-center task-type-btn" data-type="postprocess">
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-lg mx-auto mb-2">
<i class="ri-settings-3-line text-orange-600 text-xl"></i>
</div>
<div class="text-sm font-medium text-gray-900">结果后处理</div>
<div class="text-xs text-gray-500 mt-1">过滤、融合、格式化输出</div>
</button>
</div>
<form id="createTaskForm">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">任务名称</label>
<input type="text" name="taskName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入任务名称">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">数据类型</label>
<div class="relative">
<select name="dataType" class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8">
<option>图像</option>
<option>文本</option>
<option>音频</option>
<option>视频</option>
<option>表格数据</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
<div class="relative">
<select name="priority" class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8">
<option>普通</option>
<option>高</option>
<option>紧急</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
<textarea name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入任务描述"></textarea>
</div>
</div>
</form>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
<button id="cancelTaskBtn" class="px-4 py-2 border border-gray-300 rounded-button text-sm text-gray-700 hover:bg-gray-50">取消</button>
<button id="submitTaskBtn" class="px-4 py-2 bg-primary text-white rounded-button text-sm hover:bg-blue-600">创建任务</button>
</div>
</div>
</div>
</main>
</div>
</div>
<script id="workflowToggle">
document.addEventListener('DOMContentLoaded', function() {
const workflowToggle = document.getElementById('workflowToggle');
workflowToggle.addEventListener('click', function() {
this.classList.toggle('active');
});
});
</script>
<script id="chart">
document.addEventListener('DOMContentLoaded', function() {
const chartDom = document.getElementById('taskTrendChart');
const myChart = echarts.init(chartDom);
const option = {
animation: false,
grid: {
top: 20,
right: 20,
bottom: 40,
left: 60
},
xAxis: {
type: 'category',
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
},
axisLabel: {
color: '#6b7280'
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#6b7280'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '处理任务数',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: 'rgba(87, 181, 231, 1)',
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(87, 181, 231, 0.3)'
},
{
offset: 1,
color: 'rgba(87, 181, 231, 0.1)'
}
]
}
},
data: [45, 32, 67, 89, 76, 94, 82]
},
{
name: '成功任务数',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: 'rgba(141, 211, 199, 1)',
width: 2
},
data: [44, 31, 65, 87, 75, 92, 81]
}
],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.95)',
borderColor: '#e5e7eb',
textStyle: {
color: '#1f2937'
}
},
legend: {
data: ['处理任务数', '成功任务数'],
textStyle: {
color: '#6b7280'
}
}
};
myChart.setOption(option);
});
</script>
<script id="workflow">
document.addEventListener('DOMContentLoaded', function() {
const workflowCanvas = document.getElementById('workflowCanvas');
const nodes = workflowCanvas.querySelectorAll('.workflow-node');
let selectedNode = null;
let isDragging = false;
let dragOffset = { x: 0, y: 0 };
nodes.forEach(node => {
node.addEventListener('mousedown', function(e) {
selectedNode = this;
isDragging = true;
const rect = this.getBoundingClientRect();
const canvasRect = workflowCanvas.getBoundingClientRect();
dragOffset.x = e.clientX - rect.left;
dragOffset.y = e.clientY - rect.top;
nodes.forEach(n => n.classList.remove('selected'));
this.classList.add('selected');
e.preventDefault();
});
});
document.addEventListener('mousemove', function(e) {
if (isDragging && selectedNode) {
const canvasRect = workflowCanvas.getBoundingClientRect();
const x = e.clientX - canvasRect.left - dragOffset.x;
const y = e.clientY - canvasRect.top - dragOffset.y;
selectedNode.style.left = Math.max(0, Math.min(x, workflowCanvas.offsetWidth - selectedNode.offsetWidth)) + 'px';
selectedNode.style.top = Math.max(0, Math.min(y, workflowCanvas.offsetHeight - selectedNode.offsetHeight)) + 'px';
}
});
document.addEventListener('mouseup', function() {
isDragging = false;
selectedNode = null;
});
});
</script>
<script id="runWorkflowModal">
document.addEventListener('DOMContentLoaded', function() {
const runWorkflowBtn = document.getElementById('runWorkflowBtn');
const runWorkflowModal = document.getElementById('runWorkflowModal');
const closeRunModal = document.getElementById('closeRunModal');
const cancelRunBtn = document.getElementById('cancelRunBtn');
const confirmRunBtn = document.getElementById('confirmRunBtn');
function openRunModal() {
runWorkflowModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeRunModal() {
runWorkflowModal.classList.add('hidden');
document.body.style.overflow = '';
}
runWorkflowBtn.addEventListener('click', openRunModal);
closeRunModal.addEventListener('click', closeRunModal);
cancelRunBtn.addEventListener('click', closeRunModal);
runWorkflowModal.addEventListener('click', function(e) {
if (e.target === this) {
closeRunModal();
}
});
confirmRunBtn.addEventListener('click', function() {
closeRunModal();
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg z-50 flex items-center';
notification.innerHTML = `
<i class="ri-check-line mr-2"></i>
<span>工作流开始执行，请在任务列表中查看进度</span>
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
});
});
</script>
<script id="taskModal">
document.addEventListener('DOMContentLoaded', function() {
const createTaskBtn = document.getElementById('createTaskBtn');
const createTaskModal = document.getElementById('createTaskModal');
const closeTaskModal = document.getElementById('closeTaskModal');
const cancelTaskBtn = document.getElementById('cancelTaskBtn');
const submitTaskBtn = document.getElementById('submitTaskBtn');
const createTaskForm = document.getElementById('createTaskForm');
const taskTypeBtns = document.querySelectorAll('.task-type-btn');
let selectedTaskType = '';
function openModal() {
createTaskModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeModal() {
createTaskModal.classList.add('hidden');
document.body.style.overflow = '';
createTaskForm.reset();
taskTypeBtns.forEach(btn => {
btn.classList.remove('border-primary', 'bg-blue-50');
btn.classList.add('border-gray-200');
});
selectedTaskType = '';
}
taskTypeBtns.forEach(btn => {
btn.addEventListener('click', function() {
taskTypeBtns.forEach(b => {
b.classList.remove('border-primary', 'bg-blue-50');
b.classList.add('border-gray-200');
});
this.classList.remove('border-gray-200');
this.classList.add('border-primary', 'bg-blue-50');
selectedTaskType = this.dataset.type;
});
});
createTaskBtn.addEventListener('click', openModal);
closeTaskModal.addEventListener('click', closeModal);
cancelTaskBtn.addEventListener('click', closeModal);
createTaskModal.addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
submitTaskBtn.addEventListener('click', function() {
const formData = new FormData(createTaskForm);
if (!formData.get('taskName') || !selectedTaskType) {
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg z-50';
notification.innerHTML = '请填写任务名称并选择任务类型';
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
return;
}
closeModal();
const successNotification = document.createElement('div');
successNotification.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg z-50';
successNotification.innerHTML = '任务创建成功';
document.body.appendChild(successNotification);
setTimeout(() => {
successNotification.remove();
}, 3000);
});
});
</script>
<script id="search">
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('taskSearchInput');
const statusFilter = document.getElementById('taskStatusFilter');
function filterTable() {
const searchTerm = searchInput.value.toLowerCase();
const selectedStatus = statusFilter.value;
const tableRows = document.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const taskName = row.querySelector('.text-sm.font-medium.text-gray-900').textContent.toLowerCase();
const taskId = row.querySelector('.text-sm.text-gray-500').textContent.toLowerCase();
const taskType = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
const status = row.querySelector('td:nth-child(4) span').textContent;
const matchesSearch = taskName.includes(searchTerm) ||
taskId.includes(searchTerm) ||
taskType.includes(searchTerm);
const matchesStatus = selectedStatus === 'all' ||
(selectedStatus === 'running' && status === '处理中') ||
(selectedStatus === 'completed' && status === '已完成') ||
(selectedStatus === 'failed' && status === '失败') ||
(selectedStatus === 'pending' && status === '等待中');
row.style.display = matchesSearch && matchesStatus ? '' : 'none';
});
}
searchInput.addEventListener('input', filterTable);
statusFilter.addEventListener('change', filterTable);
});
</script>
<script id="checkbox">
document.addEventListener('DOMContentLoaded', function() {
const checkboxes = document.querySelectorAll('.custom-checkbox');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if (this.parentElement.parentElement.tagName === 'TH') {
const tableCheckboxes = document.querySelectorAll('tbody .custom-checkbox');
tableCheckboxes.forEach(cb => {
cb.checked = this.checked;
});
}
});
});
});
</script>
</body>
</html>